<template>
  <div class="certificate">
    <div >
      <span style="display: block; font-size: 14px; line-height: 23px; text-align: left; color: #293843; opacity: 0.4"
        >用户认证率</span
      >
      <span style="display: block; text-align: center; font-size: 37px; font-weight: 500; color: #212d36">{{percent}}%</span>
    </div>
    <div class="chart" ref="chartCertificate"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props:{
    percent:{
      type:Number,
      default:0
    }
  },
  data() {
    return {
      chartData:[{name:'1',value:0},{name:'2',value:100}]
    }
  },
  watch: {
      'percent': function (val) {
        this.chartData = [
          {name:'1',value:val},{name:'2',value:100-val}
        ];
        this.initChart();
      }
    },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      let myChart = echarts.init(this.$refs.chartCertificate)
      let option = {
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '90%'],
            itemStyle: {
              color: 'transparent',
            },
          },
          {
            name: 'Access From',
            type: 'pie',
            radius: ['60%', '90%'],
            color: ['#4F76F7', 'transparent'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 20,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              show: false,
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: this.chartData,
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped>
.certificate {
  height: 125px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;

  .chart {
    height: 80px;
    width: 100px;
  }
}
</style>